<template>
	<view class="paidDetail">
		<navBar isBack backColor="#fff" title="订单详情" color="#fff" background="transprant"></navBar>
		<view class="topImg">
			<image :src="`${baseImg}/static/adminShop/detailBack.png`" mode=""></image>
			<!-- time -->
			<view class="time">
				<view class="title">
					<image :src="`${baseImg}/static/adminShop/detailWait.png`" mode=""></image>
					{{status[orderdetail.order_status]}}
				</view>
				<view class="onlyTime" v-if="orderdetail.order_status == 1">还剩 <countdown :startTime="startTime" :endTime="enTime" style="display: inline-block;" />自动关闭订单</view>
			</view>
			<!-- 用户信息 -->
			<view class="userInfo" v-if="orderdetail.name">
				<view class="infoItem">
					<view class="left">
						<image :src="`${baseImg}/static/adminShop/detailAddress.png`" mode=""></image>
						<view class="call">
							<view class="info">
								{{orderdetail.name}} {{orderdetail.mobile}}
							</view>
							<view class="address">
								{{orderdetail.province}}{{orderdetail.city}}{{orderdetail.area}}{{orderdetail.address}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content" :style="'margin-top:'+navHeight+'rpx;'">
			<!-- 商品清单 -->
			<view class="shopList">
				<h3>{{orderdetail.store_name}}<i class="iconfont icon-more"></i></h3>
				<view class="list" v-for="(items,index) in orderdetail.orderItems" :key="index">
					<view class="item">
						<image :src="items.main_imgurl" mode=""></image>
						<view class="shopInfo">
							<view class="top">
								<view class="tit omit-2">
									{{items.product_title}}
								</view>
								¥ {{items.price}}
							</view>
							<view class="spec">
								<view v-for="(attr_params,index) in items.attr_params" style="display: inline-block;">
									<text v-if="attr_params.attr_name">{{attr_params.attr_value}}</text>
									<text v-if="attr_params.key">{{attr_params.value}}</text>
								</view>
								<text style="float: right;">x{{items.num}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 价钱 -->
				<view class="price">
					<view class="all">
						总价<span>¥ {{orderdetail.price}}</span>
					</view>
					<view class="all">
						运费<span>¥ 0.00</span>
					</view>
					<view class="need" v-if="orderdetail.is_many_way == 1">
						待付定金<span>¥ {{orderdetail.deposit_price}}</span>
					</view>
				</view>
			</view>
			
			<!-- 订单信息 -->
			<view class="orderInfo">
				<h3>订单信息</h3>
				<view class="top">
					<view class="item">
						订单编号<view class="txt">{{orderdetail.order_code}}<span @click="copy(orderdetail.order_code)">复制</span></view>
					</view>
					<view class="item">
						支付状态<view class="txt">{{status[orderdetail.order_status]}}</view>
					</view>
					<view class="item">
						配送方式<view class="txt" v-if="orderdetail.move_way == 1">快递</view><view class="txt" v-else>自提</view>
					</view>
				</view>
				<view class="bottom">
					下单时间<span>{{orderdetail.create_time | formatDates}}</span>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btn" v-if="orderdetail.order_status == 1">
			<view class="btn_item" @click="gitpouchatshow">联系商家</view>
			<view class="btn_item" @click="cancelOrder(orderdetail.order_code)">取消订单</view>
			<view class="btn_item" @click="payModel(orderdetail,orderdetail.order_code)">立即付款</view>
		</view>
		<view class="btn" v-if="orderdetail.order_status == 2">
			<view class="btn_item" @click="gitpouchatshow">联系商家</view>
			<view class="btn_item" v-if="orderdetail.is_many_way == 1 &&item.balance_status == 0" @click="payModel(orderdetail,orderdetail.order_code)">付尾款</view>
		</view>
		<view class="btn" v-if="orderdetail.order_status == 3">
			<view class="btn_item" @click="gitpouchatshow">联系商家</view>
			<view class="btn_item" v-if="orderdetail.arrive_status == 0" @click="confirms(orderdetail,orderdetail.order_code)">确认收货</view>
			<view class="btn_item" v-if="orderdetail.is_many_way == 1 &&item.balance_status == 0" @click="payModel(orderdetail,orderdetail.order_code)">付尾款</view>
		</view>
		<view class="btn" v-if="orderdetail.order_status == 4">
			<view class="btn_item" @click="gitpouchatshow">联系商家</view>
			<view class="btn_item" @click="deleteOrder(orderdetail.order_code)">删除订单</view>
		</view>
		<view class="btn" v-if="orderdetail.order_status == 5">
			<view class="btn_item" @click="gitpouchatshow">联系商家</view>
			<view class="btn_item" @click="deleteOrder(orderdetail.order_code)">删除订单</view>
		</view>
	
		<!-- 二维码 -->
		<view class="qrcodepop" :style="showModal?'':'display:none;'">
			<view class="qrcodecont">
				<view class="qrname">
					<view>核销二维码</view>
					<view><canvas  canvas-id="myQrcode"></canvas></view>
				</view>
				<view class="iconfont icon-close" @click="handleHideCodeClick"></view>
			</view>
		</view>
		
		<!-- 微信客服 -->
		<view class="pouchat" v-if="pouchatshow">
		  <view class="poucont">	
			<view class="chatlist">
				<view class="noes"v-if="!config_url && !config_id">暂时未配置客服，请见谅!</view>
				<view class="chatml" @click="gitwxchat()" v-if="config_url">
					<image src="https://manager.ryz1620.com/static/my/wxchat.png" mode="widthFix"></image>
					<text class="t1">在线微信客服</text>
					<text class="t2">可直接联系客服</text>
				</view>
				<view class="chatml" v-if="config_id">
					<cell class="cell-service" bind:startmessage='startmessage' bind:completemessage="completemessage" :plugid="config_id"/>
					<image src="https://manager.ryz1620.com/static/my/codechat.png" mode="widthFix"></image>
					<text class="t1">添加微信客服</text>
					<text class="t2">扫微信二维码</text>
				</view>
			</view>
			<view class="iconfont icon-close" @click="wxCodeClick"></view>
		  </view>	
		</view>
	</view>
</template>

<script>
	import countdown from "../../../components/cz-countdown/cz-countdown.vue"
	import service_mall from '@/service/now.js'
	const qrCode = require('@/utils/weapp-qrcode.js')
	export default{
		components: {
			countdown,
			// #ifdef MP-WEIXIN
			"cell": "plugin://contactPlugin/cell",
			// #endif
		},
		data(){
			return{
				baseImg:this.$static,
				navHeight:200,
				startTime:'',
				enTime:'',
				status: {
					1: "待付定金",
					2: "待发货",
					3: "待收货",
					4: "已完成",
					5: "已关闭"
				},
				orderdetail:'',
				tapIndex:'',
				code:'',
				showModal: false,
				terminal:"",
				config_id:'',
				config_url:'',
				pouchatshow:false,
			}
		},
		filters: {
			formatDates(value) {
				  let date = new Date(parseInt(value) * 1000);
				  let y = date.getFullYear();
				  let m = date.getMonth() + 1;
				  m = m < 10 ? "0" + m : m;
				  let d = date.getDate();
				  d = d < 10 ? "0" + d : d;
				  let h = date.getHours();
				  h = h < 10 ? "0" + h : h;
				  let minute = date.getMinutes();
				  let second = date.getSeconds();
				  minute = minute < 10 ? "0" + minute : minute;
				  second = second < 10 ? "0" + second : second;
				  return y +"-" + m + "-" + d + " " + h + ":" + minute + ":"+second;
			},
				formatDate(value) {
					var date = new Date(value);
					//date.setTime(value);
					var month = date.getMonth() + 1;
					var hours = date.getHours();
					if (hours < 10)
						hours = "0" + hours;
					var minutes = date.getMinutes();
					if (minutes < 10)
						minutes = "0" + minutes;
					var time = date.getFullYear() + "/" + month + "/" + date.getDate() +
						" " + hours + ":" + minutes;
					return time;
					}
		},
		onLoad(options) {
			this.navHeight = 468 - (Number(this.$store.state.system.navBarHeight)*2)
			this.order_code = options.orderid
			this.getdata();
			//#ifdef MP-WEIXIN
				this.terminal = "wxapplet";
			//#endif
		},
		methods:{
			// 获取企业微信callme配置
			gitConfig() {
				service_mall.getCallMeConfig({ partner_type: 'shop', partner_id: this.orderdetail.store_id  }).then(res => {
					if (res.code == 1) {
						this.config_id = res.data.config_id;
					}
				});
			},
			gitwxConfig() {
				service_mall.getwxMeConfig({ partner_type: 'shop', partner_id: this.orderdetail.store_id  }).then(res => {
					if (res.code == 1) {
						this.config_url = res.data.url;
					}
				});
			},
			gitpouchatshow(){
				this.pouchatshow = true
			},
			wxCodeClick(){
				this.pouchatshow = false
			},
			gitwxchat(){
				wx.openCustomerServiceChat({
				  extInfo: {url: this.config_url},
				  corpId: this.$env.CORPID,
				  success(res) {}
				})
			},
			copy(value){
				uni.setClipboardData({
				  data:value,//要被复制的内容
				  success:()=>{//复制成功的回调函数
					console.log('复制成功')
				  }
				});
			},
			// 订单详情
			getdata() {
				uni.showLoading('加载中')
				service_mall.getdata({
					 order_code:this.order_code
				})
				.then(res => {
					if(res.code == 1){
						uni.hideLoading();
						 let endata = res.data.create_time + 86340
						 this.startTime= this.$options.filters.formatDate(new Date())
						 this.enTime= this.$options.filters.formatDate(endata)
						 this.orderdetail = res.data
						 this.gitConfig()
						 this.gitwxConfig()
						 console.log(this.startTime,this.enTime,'\------')
					}
				})
				.catch(err => {
					
				})
			},
			// 确认收货
			confirms(item,id){
				uni.navigateTo({
					url:"/pages_now/pages/mall/order/confirmorder?orderid=" + id
				})	
			},
			// 选择支付方式
			payModel(item,id){
				    let itemList = [ "微信支付", "线下支付"]
					this.itemList = itemList
			        uni.showActionSheet({
			            itemList: this.itemList,
			            success: (t) => {
							this.tapIndex = t.tapIndex+1
					       this.getpayorder(item.order_code)	
						}
			        });
			 },
			initQrCode:function(){
				new qrCode('myQrcode', {
					text: this.code,
					width: 160,
					height: 160,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.H
				})
			},
			handleShowCodeClick:function(){
				this.showModal = true
				this.$nextTick(function(){
					this.initQrCode()
				})
			},
			handleHideCodeClick:function(){
				this.showModal = false
			},
			getpayorder(order_codes){
				service_mall.getpay({
					order_no:order_codes,
					type:'purchase_order',
					pay_type:this.tapIndex
					}).then(res=>{
					if(res.code == 1){
						let data = res.data
					    if(this.tapIndex == 1){	
							if(this.terminal == 'wxapplet'){
								uni.requestPayment({
									appId:res.data.appId,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									paySign: res.data.paySign,
									signType: res.data.signType,
									timeStamp: res.data.timeStamp,
									success: (suc) => {
										uni.navigateTo({
											url: "/pages_now/pages/mall/order/sucess?type=1" + '&order_no=' + order_codes
										})
									},
									fail: (err) => {
										uni.navigateTo({
											url: "/pages_now/pages/mall/order/sucess?type=0" + '&order_no=' + order_codes
										})
									}
								});
							}else{
								uni.requestPayment({
									provider: 'wxpay',
									orderInfo: {
										"appid":res.data.appid,
										"partnerid": res.data.partnerid,
										"prepayid": res.data.prepayid,
										"noncestr": res.data.noncestr,
										"package": res.data.package,
										"timestamp": res.data.timestamp,
										"sign": res.data.sign,
									},
									success: (suc) => {
										uni.navigateTo({
											url: "/pages_now/pages/mall/order/sucess?type=1" + '&order_no=' + order_codes
										})
									},
									fail: (err) => {
										uni.navigateTo({
											url: "/pages_now/pages/mall/order/sucess?type=0" + '&order_no=' + order_codes
										})
									}
								});
							}
						}else{
							this.code = res.data.verificationCode
							this.handleShowCodeClick()
						}
										
					}else{
							this.failMsg(res)
					}	
				})
			},
			// 删除订单
			deleteOrder(id) {
				let that = this
				uni.showModal({
					title: "提示！",
					content: "是否删除该订单",
					success: function(i) {
						if (i.confirm) {
							uni.showLoading('正在删除...')
							service_mall.getdelProductOrder({
								 order_code:id,
							}).then(res => {
								uni.hideLoading();
								if (res.code == 1) {
									uni.navigateTo({
										url: '/pages_now/pages/mall/order/list',
									});
								}else{
									uni.showToast({title: "删除失败！", icon: "none"});
								}
							});
						}
					}
				});
			},
			// 取消订单
			cancelOrder(id) {
				let that = this
				uni.showModal({
					title: "提示！",
					content: "是否取消该订单",
					success: function(i) {
						if (i.confirm) {
							uni.showLoading('正在取消...')
							service_mall.getupOrdercancel({
								order_code:id,
							}).then(res => {
								uni.hideLoading();
								if (res.code == 1) {
									that.list = []
									that.page =1
									that.getdata() ;
								}else{
									uni.showToast({title: "取消失败！", icon: "none"});
								}
							});
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.icon-more{display: inline-block;}
	.paidDetail{
		width: 100%;
		.topImg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 468rpx;
			image{
				width: 100%;
				height: 100%;
			}
			.time{
				padding: 0 44rpx;
				position: absolute;
				bottom: 146rpx;
				left: 0;
				color: #fff;
				.title{
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;
					image{margin-right: 16rpx;width: 40rpx;height: 40rpx;border-radius: 50%;}
					font: 500 36rpx/36rpx PingFang SC;
				}
				.onlyTime{font: 400 26rpx/36rpx PingFang SC;margin-top: 25rpx;}
			}
			// 用户信息
			.userInfo{
				width: 100%;
				position: absolute;
				left: 0;
				bottom: -102rpx;
				.infoItem{
					padding: 28rpx 24rpx;
					display: flex;
					justify-content: space-between;
					margin: 0 auto;
					width: 702rpx;
					height: 188rpx;
					background-color: #fff;
					border-radius: 16rpx;
					image{width: 40rpx;height: 40rpx;}
					.left{
						display: flex;
						.call{
							margin:0 20rpx 0 24rpx;
							display: flex;
							flex-direction: column;
							.info{
								margin-bottom: 20rpx;
								display: flex;
								color: #0A0605;
								font: 500 26rpx/40rpx PingFang SC;
								span{
									margin-left: 16rpx;
									padding: 0rpx 12rpx;
									border-radius: 18rpx;
									background-color: #F5F6F6;
									font: 400 18rpx/40rpx PingFang SC;
								}
							}
							.address{
								color: #505050;
								font: 400 26rpx/40rpx PingFang SC;
							}
						}
					}
				}
			}
		}
		
		// 内容
		.content{
			padding: 126rpx 24rpx 0;
			margin-bottom: 116rpx;			padding-bottom: constant(safe-area-inset-bottom);			padding-bottom: env(safe-area-inset-bottom);
			// 商品清单
			.shopList{
				background-color: #fff;
				padding: 28rpx;
				border-radius: 16rpx;
				h3{
					padding-bottom: 28rpx;
					font: 500 30rpx/40rpx PingFang SC;
					color: #0A0605;
				}
				.list{
					.item{
						display: flex;
						margin-bottom: 32rpx;
						image{
							width: 148rpx;
							height: 148rpx;
							border-radius: 8RPX;
						}
						.shopInfo{
							width: 478rpx;
							margin-left: 24rpx;
							display: flex;
							flex-direction: column;
							.top{
								color: #505050;
								font: 400 26rpx/40rpx PingFang SC;
								.tit{
									width: 328rpx;
								}
								display: flex;
								justify-content: space-between;
							}
							.spec{
								margin-top: 40rpx;
								color: #A0A0A0;
								font: 400 22rpx/22rpx PingFang SC;
							}
						}
					}
				}
				// 价钱
				.price{
					padding-top: 32rpx;
					border-top: 2rpx solid #F5F5F5;
					view{
						display: flex;
						justify-content: space-between;
					}
					.all{
						padding: 10rpx 0;
						font: 400 26rpx/40rpx PingFang SC;
						color: #505050;
					}
					.need{
						padding: 10rpx 0;
						font: 500 26rpx/40rpx PingFang SC;
						color: #0A0605;
						span{
							color: #DBA954;
						}
					}
				}
			}
			// 订单信息
			.orderInfo{
				margin-top: 24rpx;
				background-color: #fff;
				padding: 28rpx;
				border-radius: 16rpx;
				h3{
					font: 500 30rpx/40rpx PingFang SC;
					color: #0A0605;
				}
				.top{
					padding: 28rpx 0 0;
					margin-bottom: 24rpx;
					border-bottom: 2rpx solid #f5f5f5;
					.item{
						font: 400 26rpx/40rpx PingFang SC;
						color: #A0A0A0;
						display: flex;
						margin-bottom: 24rpx;
						align-items: center;
						.txt{
							display: flex;
							color: #505050;
							margin-left: 32rpx;
							span{
								margin-left: 18rpx;
								padding: 0 14rpx;
								border-radius: 18rpx;
								color: #DBA954;
								font: 400 18rpx/40rpx PingFang SC;
								background-color: rgba(219,169,84,0.1);
							}
						}
					}
				}
				.bottom{
					font: 400 26rpx/40rpx PingFang SC;
					color: #A0A0A0;
					display: flex;
					align-items: center;
					span{
						margin-left: 32rpx;
						color: #505050;
					}
				}
			}
		}
		
		// 按钮
		.btn{
			width: 100%;
			height: 92rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: flex-end;
			padding: 0 24rpx;
			height: calc(92rpx+ constant(safe-area-inset-bottom));			height: calc(92rpx + env(safe-area-inset-bottom));			padding-bottom: constant(safe-area-inset-bottom);			padding-bottom: env(safe-area-inset-bottom);
			.btn_item{
				width: 154rpx;
				height: 56rpx;
				border-radius: 28rpx;
				border: 2rpx solid #505050;
				font: 400 24rpx/56rpx PingFang SC;
				color: #505050;
				text-align: center;
				margin:18rpx 0 18rpx 20rpx;
			}
		}
	}
.qrcodepop{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	z-index: 9999;
	.qrcodecont{
		width: 400rpx;
		position: absolute;
		left: 50%;
		top: 25%;
		margin-left: -200rpx;
		.qrname{
			background: #fff;
			line-height: 80rpx;
			height: 440rpx;
			overflow: hidden;
			padding: 20rpx;
			text-align: center;
			border-radius: 15rpx;
			canvas{
				width: 300rpx;
				height: 300rpx;
				margin: auto;
			}
		}
		.icon-close{
			display: block;
			font-size: 60rpx;
			color: #fff;
			text-align: center;
			margin: 30rpx auto;
		}
	}
}
	// 客服弹框
			.pouchat{
				position: fixed;
				background: rgba(0,0,0,0.5);
				top:0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 9999;
				.noes{
					padding: 30rpx;
					font-size: 28rpx;
					color: #666;
				}
				.poucont{
					position: absolute;
					top:30%;
					left: 15%;
					right: 15%;
					.icon-close{
						width: 80rpx;
						height: 80rpx;
						font-size: 70rpx;
						color: #fff;
						line-height: 80rpx;
						text-align: center;
						margin: 30rpx auto;
					}
				}
				.chatlist{
					background: #fff;
					padding:30rpx;
					border-radius: 10rpx;
				}
				.chatml{
					position: relative;
					padding: 20rpx;
					padding-left: 100rpx;
					min-height: 100rpx;
					.cell-service{
						position: absolute;
						right: 0;
						bottom: 0;
						left: 0;
						top: 0;
						opacity: 0;
						z-index: 10;
						.cell--bubble{
							width: 100%;
						}
					}
					text{
						display: block;
						line-height: 40rpx;
					}
					.t1{
						font-size: 32rpx;
					}
					.t2{
						font-size: 24rpx;
						color: #999;
					}
					image{
						width: 70rpx;
						height: 70rpx;
						position: absolute;
						left: 15rpx;
						top:25rpx;
					}
				}
			}
</style>
